<template>
  <div class="top_header">
    <div class="header_title">
      <img src="../../assets/img/sicnu_logo.jpg" alt="">
      <div class="header_title_span"> 招生宣传系统</div>
    </div>
    <el-menu
        router
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#316a4b"
        text-color="#e6e4df"
        active-text-color="#ffcc00">
      <el-menu-item v-if="isLogin" index="/activities" index-path="index" style="height: 40px">
        首页
      </el-menu-item>
      <el-menu-item v-if="isLogin" index="/activities/list" style="height: 40px">
        {{ isUniversity || isCollege ? "活动列表" : "报名活动" }}
      </el-menu-item>
      <el-menu-item v-if="isUniversity" index="/activities/create" style="height: 40px">
        创建活动
      </el-menu-item>
      <el-menu-item v-if="isLogin && (isStudent || isTeacher || isUniversity)" index="/activities/manage"
                    style="height: 40px">
        活动管理
      </el-menu-item>
      <el-menu-item v-if="isLogin && (isCollege || isUniversity)" index="/activities/audit" style="height: 40px">
        活动审核
      </el-menu-item>
      <el-submenu v-if="isLogin" index="/" style="height: 40px; padding: 0">
        <template slot="title">• • •</template>
        <el-menu-item index="4-1">其他</el-menu-item>
      </el-submenu>

      <el-submenu v-if="isLogin" index="/account" style="height: 40px; padding: 0">
        <template slot="title">{{ userName }}</template>
        <el-menu-item index="/login" @click="personal()">个人中心</el-menu-item>
        <el-menu-item index="/login" @click="logout()">退出登录</el-menu-item>
      </el-submenu>

      <el-menu-item v-if="!isLogin" index="/login" style="height: 40px">
        去登录
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import CacheUtil from "@/utils/CacheUtil";

export default {
  name: "Header",
  watch: {
    $route(to, from) {
      // console.log("to", to)
      this.activeIndex = to.path;
    }
  },
  data() {
    return {
      isUniversity: CacheUtil.isUniversity(),
      isStudent: CacheUtil.isStudent(),
      isCollege: CacheUtil.isCollege(),
      isTeacher: CacheUtil.isTeacher(),
      userName: CacheUtil.getUserName(),
      isLogin: CacheUtil.isLogin(),
      activeIndex: '/activities',
    }
  },
  created() {
    this.isUniversity = CacheUtil.isUniversity();
  },
  methods: {
    handleSelect(key) {
      this.$router.push(key)
    },
    errorHandler() {
      return true
    },
    logout() {
      CacheUtil.logout();
    },
    personal() {
      this.$router.push('/personal')
    }
  }
}
</script>

<style scoped lang="less">

.top_header {
  display: flex;
  width: 100%;
  justify-content: space-between;

  .header_title {
    display: flex;

    img {
      padding-top: 2px;
      height: 35px;
    }

    .header_title_span {
      margin-left: 10px;
      height: 40px;
      line-height: 40px;
      color: #e6e4df;
      font-size: 24px;
      font-weight: bolder;
      letter-spacing: 5px;
      width: 200px;
    }
  }
}

.el-menu {
  border-bottom: none !important;
  //margin-right: 5px;
  height: 40px !important;

  .is-opened {
    //border-bottom: solid #ffcc00 1px;
  }

  .el-menu-item {
    font-weight: bolder;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
  }

  .el-submenu {
    margin-top: 5px;
    right: 100px;
    font-weight: bolder;

    /deep/ .el-submenu__title {
      height: 30px !important;
      line-height: 30px;
    }
  }

  /deep/ .el-menu-item {
    width: 100px !important;
    background-color: white;
  }
}

.avatar_block {
  width: 50px !important;
}

#avatar_menu {
  //width: 50px !important;
}


</style>
